<style scoped>
  .sun {
    position: relative;
    animation: rotate 4s linear infinite;
    --color:  #c2301c;
    --scale: 0.4;
  }

  .center {
    height: calc(var(--scale) * 10em);
    width: calc(var(--scale) * 10em);
    text-align: center;
    line-height: calc(var(--scale) * 10em);
    font-weight: 900;
    color: #ffd700;
    background-color: var(--color);
    border-radius: 50%;
    box-shadow: 0 0 calc(var(--scale) * 3em) var(--color);
  }

  .ray {
    position: absolute;
    height: calc(var(--scale) * 3em);
    width: calc(var(--scale) * 0.5em);
    box-shadow: 0 0 calc(var(--scale) * 1em) var(--color);
    background-color: var(--color);
  }

  .r-1 {
    margin-left: calc(var(--scale) * 4.75em);
    margin-top: calc(var(--scale) * 1em);
  }

  .r-2 {
    margin-left: calc(var(--scale) * 12.25em);
    margin-top: calc(var(--scale) * -6.25em);
    transform: rotate(90deg);
  }

  .r-3 {
    margin-left: calc(var(--scale) * 4.75em);
    margin-top: calc(var(--scale) * -14em);
  }

  .r-4 {
    margin-left: calc(var(--scale) * -2.75em);
    margin-top: calc(var(--scale) * -6.25em);
    transform: rotate(90deg);
  }

  .r-5 {
    margin-left: calc(var(--scale) * -0.5em);
    margin-top: calc(var(--scale) * -1em);
    transform: rotate(45deg);
  }

  .r-6 {
    margin-left: calc(var(--scale) * 9.75em);
    margin-top: calc(var(--scale) * -1em);
    transform: rotate(-45deg);
  }

  .r-7 {
    margin-left: calc(var(--scale) * 10.25em);
    margin-top: calc(var(--scale) * -11.75em);
    transform: rotate(45deg);
  }

  .r-8 {
    margin-left: calc(var(--scale) * -0.5em);
    margin-top: calc(var(--scale) * -11.75em);
    transform: rotate(-45deg);
  }

  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }
</style>

<template>
  <div class="sun">
    <div class="center">等</div>
    <div class="ray r-1"></div>
    <div class="ray r-2"></div>
    <div class="ray r-3"></div>
    <div class="ray r-4"></div>
    <div class="ray r-5"></div>
    <div class="ray r-6"></div>
    <div class="ray r-7"></div>
    <div class="ray r-8"></div>
  </div>
</template>
